<template>
<div>
    <h3>watch 侦听器的用法</h3>
    <input type="text" class="form-control" v-model.trim="info.username"/>
</div>
</template>

<script>
import axios from 'axios';
export default{
    name:'MyWatch',
    data(){
        return{
            username:'admin',
            info:{
                username:'zs',
                age:20,
            }
        }
    },
    // watch节点之下定义自己的侦听器
    watch:{
        // 监听username值的变化
        // 形参列表中，第一个值是变化后的新值，第二个值是变化之前的旧值
        // async username(newVal, oldVal) {
        //   console.log(newVal, oldVal)
        // //   axios.get的返回值是一个promise类型的数据，所以用async、await进行简化，简化之后就是真正的数据对象
        // //   拿到数据对象之后，发现里面有很多属性，data是其中的一个属性，这里只想要查看data属性，所以用{data:res}将其取出来，并将data重命名为res
        //   const {data: res} = await axios.get("https://www.escook.cn/api/finduser/"+newVal);
        //   console.log(res)
        // },

        //1.监听username值的变化    
        // username:{
        //     // handler属性是固定写法，当username变化时，调用handler
        //     async handler(newVal,oldVal){
        //         const {data:res}=await axios.get("https://www.escook.cn/api/finduser/"+newVal);
        //         console.log(res);
        //     },
        //     //表示组件加载完毕之后立即调用一次当前的watch侦听器
        //     immediate:true,
        // },

        // info:{//这里直接监听了info对象的变化
        //     async handler(newVal){
        //         const {data:res}=await axios.get("https://www.escook.cn/api/finduser/"+newVal.username);
        //         console.log(res);
        //     },
        //     // 需要使用deep选项，否则username值的变化无法被监听到
        //     deep:true,
        // },

        'info.username':{//只想监听info.username属性值的变化
            async handler(newVal){
                const {data:res} =await axios.get("https://www.escook.cn/api/finduser/"+newVal);
                console.log(res);
            },
            // 表示组件加载完毕之后立即调用一次当前的watch侦听器
            immediate:true,
        },
    }
}
</script>

<style lang="less" scoped></style>